<template>
  <a-row class="data-card-block">
    <a-col :span="6" v-for="item in 4" :key="item">
      <div class="box">
        <div class="box-icon"></div>
        <div class="box-title">
          <span>合作商品数量(个)</span>
          <h3>300</h3>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<style lang="scss" scoped>
.data-card-block {
  height: 92px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  margin-bottom: 38px;
  .ant-col-6 {
    &:last-child .box {
      &::after {
        display: none;
      }
    }
    .box {
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-left: 20px;
      display: flex;
      align-items: center;
      &::after {
        content: '';
        position: absolute;
        right: 0;
        display: block;
        width: 1px;
        height: 46px;
        background: #eeeeee;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .box {
    .box-icon {
      width: 52px;
      height: 52px;
      background: linear-gradient(180deg, #58c2ff 0%, #1890ff 100%);
      border-radius: 22px;
      opacity: 0.1;
      margin-right: 15px;
    }
    .box-title {
      display: flex;
      flex-direction: column;

      span {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
        margin-bottom: 2px;
      }
      h3 {
        margin: 0;
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 28px;
      }
    }
  }
}
</style>
